import { LcdGroup, LcdTheme } from "@/api/service/theme/types";
import { useCloned } from "@vueuse/core";
import { DragBox } from "../../../theme/board/data/types";

const currentTemplate = ref<string>("");
const previewImage = ref<string>("");
const groupIndex = ref(0);
const currentGroup = ref<LcdGroup>({
  groupsId: "",
  name: "",
  count: 0,
  items: []
});

const selectedProductIds = ref<string[]>([]);
/* 用户触发预览 */
const previewToggle = ref(0);
const componentObj: DragBox = {
  x: 0,
  y: 0,
  w: 0,
  h: 0,
  templateId: "",
  imageSrc: "",
  id: "",
  draggable: false,
  resizable: false,
  productIds: [],
  name: "",
  z: 0,
  version: 0,
  scale: 1
};
const themeData: LcdTheme = {
  width: 800,
  height: 1200,
  background: "",
  scale: 1,
  themeId: "",
  themeName: "",
  deptId: "",
  image: [],
  imgSrc: "",
  category: "",
  share: "0",
  groupsId: "",
  groupsIndex: 0,
  texture: "",
  videoArea: 0,
  func: "",
  priority: 0,
  createTime: "",
  updateTime: null
};
const currentComponent = ref<DragBox>();
const canvasConfig = ref<LcdTheme>(useCloned(themeData).cloned.value);

const componentList = ref<DragBox[]>([]);
const themeList = ref<LcdTheme[]>([]);
export {
  canvasConfig,
  componentList,
  componentObj,
  currentComponent,
  currentGroup,
  currentTemplate,
  groupIndex,
  previewImage,
  previewToggle,
  selectedProductIds,
  themeData,
  themeList
};
